<template>
    <div>
        <div class="card">
            <p>?常见问题</p>
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    <a class="mui-navigate-right">
                        超级会员下载慢
                    </a>
                </li>
                <li class="mui-table-view-cell">
                    <a class="mui-navigate-right">
                        会员无法登陆怎么解决
                    </a>
                </li>
                <li class="mui-table-view-cell">
                    <a class="mui-navigate-right">
                        提示账号被封怎么办
                    </a>
                </li>
            </ul>
        </div>
       <div>
            <p>反馈建议</p>
           <textarea name="" id="" cols="20" rows="5" placeholder="说说您的反馈建议" v-model="msg"></textarea>
       <!-- </div> -->
           <div class="page-actionsheet-wrapper"> 
                <p>上传图片</p> 
                <!-- 点击的时候改变 -->
                <button class="mint-button mint-button--default mint-button--large" @click="actionSheet"> 
                        <label class="mint-button-text">
                            <img src="http://help.baidu.com/resources/images/fk/form_img_add.png" alt="" />
                        </label>  
                </button> 
            </div>  
           <mt-button type="primary" @click="submit">提交</mt-button>
       </div>
       <mt-actionsheet :actions= "data" v-model="sheetVisible"></mt-actionsheet>
    </div>
</template>

<script >
    import '../../lib/mui/js/mui.min.js'
    import {Toast} from 'mint-ui'
    export default {
        data(){
        return {
            msg:'',
            // actionsheet选项内容
           data:[{
            name:"拍照",
            method:this.getCamera
           },{
            name:"相册中选取",
            method:this.getLibrary
           }],
           // 底部的操作表默认不显示
           sheetVisible:false
            }
        },
        created(){
            
        },
        methods:{
           actionSheet(){  
              this.sheetVisible = true;  
            },
            submit(){
                if (this.msg.trim().length===0) {
                    Toast('不能为空')
                }
            },
            getCamera(){
                console.log('拍照')
            },
            getLibrary(){
                console.log('打开照相机')
            }
        },
        components:{
            
        },
    }

</script>

<style lang="scss" scoped>
h4{
    text-align: center;
}
    textarea {
        border-radius: 10px;
        font-size: 12px;
    }
    p{
        font-size: 12px;
    }
    .card{
        margin-bottom: 10px;
        .mui-table-view-cell{
            padding: 6px 15px;
            .mui-navigate-right{
                font-size: 10px;
            }
        }}
        .page-actionsheet-wrapper{
            margin:0 0 10px 10px;
        }


</style>